const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ProgressPlugin, ProvidePlugin } = require("webpack")

module.exports = {
    entry: {
        chunk: ['react', 'react-dom/client'],
        app: {
            import: path.resolve(__dirname, "../", "src/main.js"),
            dependOn: "chunk"
        }
    },
    output: {
        path: path.resolve(__dirname, "../", "dist"),
        filename: "js/[name].[chunkhash:8].js",
        clean: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "../", "public/index.html"),
            inject: "body", 
            title: "vue-element-admin",
            favicon: path.resolve(__dirname, "../", "public/favicon.ico"),
            filename: "index.html"
        }),
        new ProgressPlugin({
            handler(percentage, message, ...args) {
                if (percentage === 1) {
                    console.log("100% 打包/启动成功~");
                } else {
                    console.log(`${Math.floor((percentage * 100))}% 正在打包...`)
                }
            }
        }),
        new ProvidePlugin({
            React: path.resolve(__dirname, "../", "node_modules/react/index.js"),
        })
    ],
    module: {
        rules: [
            { test: /\.(js|jsx|ts|tsx)$/, use: "babel-loader", exclude: /node_modules/ },
            { test: /\.(css|scss)$/, use: ["style-loader", "css-loader", "sass-loader"] },
            {
                test: /\.(png|jpg|svg||gif|jpeg|webp)$/,
                type: "asset/resource",
                generator: {
                    filename:'img/[name].[contenthash:8][ext]'
                }
            },
        ]
    },
    resolve: {
        alias: {
            //配置解析src路径
            "@":path.resolve(__dirname,"../","src")
        },
        //配置允许省略哪些后缀
        extensions:['.js','.jsx','.ts','.tsx','.vue']
    }
}

